<!DOCTYPE html>
<html>
<head>
    <title>Let's web socket</title>

    <script type="text/javascript" src="jquery/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.WebSocket.js"></script>

    <script type="text/javascript">
        var ws;
        $(function () {
            if ('WebSocket' in window) {
                ws = new WebSocket("ws://127.0.0.1:8888/chat");
            } else if ('MozWebSocket' in window) {
                ws = new MozWebSocket("ws://127.0.0.1:8888/chat");
            } else {
                alert('WebSocket is not supported by this browser.');
                return;
            }
            ws.onmessage = function (event) {
                $("#content").append("<p>" + event.data + "</p>");
            };
        });

        function sendMessage() {
            var text = $("#message").val();
            ws.send(text);
        }
    </script>
</head>
<body>
<div id="content" style="width: 300px;height: 200px;border: 1px solid black;overflow-y: scroll">

</div>
<input id="message" type="text"/>
<input type="button" onclick="sendMessage()" value="SEND"/>
</body>
</html>